{% extends "overview/base.html" %}
{% load static %}

{% block title %}
创建部门
{% endblock %}
{% block main %}
<!-- 写文章表单 -->
<div class="container">
    <div class="row">
        <div class="col-sm-8 settings-content">
            <br>
            <!-- 提交文章的表单 -->
            <form method="post" enctype="multipart/form-data" action=".">
                <!-- Django中需要POST数据的地方都必须有csrf_token -->
                {% csrf_token %}
                <!-- 部门名称 -->
                {% if errors.name %}
                <div class="form-group has-error">
                    <!-- 标签 -->
                    <label>部门名称</label>
                    <!-- 文本框 -->
                    {{department_form.name}}
                </div>
                <p>{{errors.name}}</p>
                {% else %}
                <div class="form-group">
                    <!-- 标签 -->
                    <label>部门名称</label>
                    <!-- 文本框 -->
                    {{department_form.name}}
                </div>
                <p class="text-warning small">*部门名称不为空</p>
                {% endif %}

                <!-- 部门logo -->
                {% if errors.image %}
                <div class="form-group has-error">
                    <!-- 标签 -->
                    <label>部门logo</label>
                    <!-- 文本框 -->
                    <div onclick="change();" style="cursor:pointer;">
		          <img id="image" src="{% static 'images/users/settings/sample.jpg' %}" alt="请上传正确的图片格式" class="img-circle" width="100" height="100" />
                    <input id="file" name="image" type="file" class="hidden" accept="image/gif,image/jpeg,image/jpg,image/png,image/tiff"/>
                    </div>
                </div>
                <p>{{errors.image}}</p>
                {% else %}
                <div class="form-group">
                    <!-- 标签 -->
                    <label>部门logo</label>
                    <!-- 文本框 -->
                    <div onclick="change();" style="cursor:pointer;">
                    {% if department_form.image.url %}
		          <img id="image" src="{{ department_form.image.url }}"  class="img-circle img-responsive"/>
		        {% else %}
		          <img id="image" src="{% static 'images/users/settings/sample.jpg' %}" alt="请上传正确的图片格式" class="img-circle" width="100" height="100" />
		        {% endif %}
                    <input id="file" name="image" type="file" class="hidden" accept="image/gif,image/jpeg,image/jpg,image/png,image/tiff"/>
                    </div>
                <p class="text-warning small">*部门logo不能为空,建议抠图</p>
                </div>
                {% endif %}

                <!-- 所属院系 -->
                <div class="form-group">
                    <!-- 标签 -->
                    <label>所属院系</label>
                    <!-- 文本框 -->
                    {{department_form.college}}
                </div>

                <!-- 成立时间 -->
                {% if errors.created_time %}
                 <div class="form-group has-error">
                    <label>成立时间</label>
                    <!-- 文本区域 -->
                     {{department_form.created_time}}
                </div>
                <p>*{{errors.created_time}}</p>
                {% else %}
                 <div class="form-group">
                    <label>成立时间</label>
                    <!-- 文本区域 -->
                     {{department_form.created_time}}
                </div>
                <p class="text-warning small">*格式为：x(年)/x(月)/x(日)</p>
                {% endif %}

                <!-- 社团人数 -->
                 <div class="form-group">
                    <label>部门人数</label>
                    <!-- 文本区域 -->
                    {{department_form.number}}
                </div>

                <!-- 联系电话 -->
                {% if errors.contact %}
                <div class="form-group has-error">
                    <label>联系电话</label>
                    <!-- 文本区域 -->
                    {{department_form.contact}}
                </div>
                <p>{{errors.contact}}</p>
                {% else %}
                <div class="form-group">
                    <label>联系电话</label>
                    <!-- 文本区域 -->
                    {{department_form.contact}}
                </div>
                <p class="text-warning small">*联系电话可选填</p>
                {% endif %}

                <!-- 电子邮箱 -->
                {% if errors.email %}
                <div class="form-group has-error">
                    <label>电子邮箱</label>
                    <!-- 文本区域 -->
                    {{department_form.email}}
                </div>
                <p>{{errors.email}}</p>
                {% else %}
                <div class="form-group">
                    <label>电子邮箱</label>
                    <!-- 文本区域 -->
                    {{department_form.email}}
                </div>
                <p class="text-warning small">*电子邮箱可选填</p>
                {% endif %}

                <!-- 社团负责人 -->
                <div class="form-group">
                    <label>部门负责人</label>
                    <!-- 文本区域 -->
                    {{department_form.principal}}
                </div>
                <p class="text-warning small">*部门负责人可选填</p>

                <!-- 部门简介 -->
                {% if errors.desc %}
                <div class="form-group has-error">
                    <label>部门简介</label>
                    <!-- 文本区域 -->
                    {{department_form.desc}}
                </div>
                <p>{{errors.desc}}</p>
                {% else %}
                <div class="form-group">
                    <label>部门简介</label>
                    <!-- 文本区域 -->
                    {{department_form.desc}}
                </div>
                <p class="text-warning small">*部门简介不可为空</p>
                {% endif %}
                <!-- 文章正文 -->
                <div class="form-group">
                    <label>详细介绍</label>

                </div>
                <div>
                     <!-- 文本区域 -->
                    {{department_form.media}}
                    {{department_form.content}}
                </div>
                <br>
                <!-- 提交按钮 -->
                <button type="submit" class="btn btn-primary">完成</button>
                <br><br>
            </form>
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
        $('#file').change(function(){
            let picture = this.files[0];
            previewPicture(picture);
        });
    });
    function previewPicture(picture){
        let reader = new FileReader();
        reader.readAsDataURL(picture);
        reader.onload = function(e){
            $('#image').attr('src', this.result).show();
        }
    }
    function change() {
        document.getElementById('file').click();
    }
  </script>
{% endblock %}